<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<show></show>
<hello></hello>
    <hr>
<count></count>
<aa></aa>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>

<script>
    //全局组件，里面有两个参数，1，组件名称。2，组件对象(模板，参数，方法)
    Vue.component("show",{
        template:" <button v-on:click=\"show!=show\">点击</button>",
        data(){             //data必须是方法
            return{
                show:false
            }

        }
    })

    Vue.component("hello",{
        template:" <button v-on:click=\"num++\">点击++{{num}}</button>",
        data(){             //data必须是方法
            return{
                num:0
            }

        }
    })


    //创建一个对象  局部组件，需要在vue实例进行注册
    const count = {
        template: " <button v-on:click=\"num--\">点击局部--{{num}}</button>",
        data() {   //data必须是方法
            return {
                num: 100
            }
        }
    }


    var vm =new Vue({
        el:"#app",
        components:{
          aa:count //aa是自定义的组件名

        }
    })
</script>
</html>